<div style="display: flex;flex-direction: row;">
  <nz-card style="width: 200px">
    <h1>仓库列表</h1>
    <div [ngStyle]="{color: seachParams.whId===''?'#1890ff': ''}" (click)="warehouseClick('')" class="warehouseList">全部</div>
    <div [ngStyle]="{color: seachParams.whId===w['id']?'#1890ff': ''}" class="warehouseList"
         *ngFor="let w of warehouseList" (click)="warehouseClick(w['id'])">{{w['name']}}</div>
  </nz-card>
  <div>
    <nz-card class="m-b-2">
      <div class="common-search-wrap">
        <div class="common-search-forms">
          <div class="common-form-item">
            <label class="common-search-label">编号名称</label>
            <div class="common-search-conrol">
              <input
                nz-input
                placeholder="请输入编号名称"
                [(ngModel)]="seachParams.num"
              />
            </div>
          </div>

          <div class="common-form-item">
            <label class="common-search-label">状态</label>
            <div class="common-search-conrol">
              <nz-select nzShowSearch nzAllowClear nzPlaceHolder="全部" [(ngModel)]="seachParams.status">
                <nz-option nzLabel="启用" nzValue="0"></nz-option>
                <nz-option nzLabel="禁用" nzValue="1"></nz-option>
              </nz-select>
            </div>
          </div>

          <div class="common-form-item">
            <label class="common-search-label">类型</label>
            <div class="common-search-conrol">
              <nz-select
                nzMode="multiple"
                [nzMaxTagCount]="1"
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="全部"
                [(ngModel)]="typeSelected"
                (ngModelChange)="typeChange($event)">
                <nz-option
                  *ngFor="let item of typeOptions"
                  [nzLabel]="item.name"
                  [nzValue]="item.content">
                </nz-option>
              </nz-select>
            </div>
          </div>

          <div class="common-form-item">
            <button nz-button nzType="primary" class="m-r-8" (click)="seachData()">查询</button>
            <button nz-button nzType="default" (click)="resetData()">重置</button>
            <!-- <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
              {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
            </button> -->
          </div>
        </div>
      </div>
    </nz-card>
    <nz-card>
      <div class="opera-btns p-b-10">
        <button nz-button nzType="primary" (click)="showModal()"
                *ngIf="permissionService.userPermission.has('used-store:usedLocationManage:edit')">新增
        </button>
      </div>

      <div class="pagination-wrap-position">
        <div class="table-wrap">
          <nz-table
            #basicTable
            nzSize="small"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableParams.tableLoading"
            [nzData]="tableData"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="tableParams.total"
            [nzPageIndex]="tableParams.page"
            [nzPageSize]="tableParams.pageSize"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)"
          >
            <thead>
            <tr>
              <th nzAlign="center">所属仓库</th>
              <th nzAlign="center">库位名称</th>
              <th nzAlign="center">状态</th>
              <th nzAlign="center">类型</th>
              <th nzAlign="center">库位编号</th>
              <th nzAlign="center">操作</th>
            </tr>
            </thead>

            <tbody>
            <tr *ngFor="let data of basicTable.data; let index = index;">
              <td nzAlign="center">{{getWarehouseName(data.whId)}}</td>
              <td nzAlign="center">{{ data.name || '-' }}</td>
              <td nzAlign="center">
              <span [ngStyle]="{'color': data.status == 0 ? '#67C23A' : '#F56C6C'}">
                {{ data.status == 0 ? '启用' : '禁用' }}
              </span>
              </td>
              <td nzAlign="center">
                {{ filterTypeName(data.type) }}
              </td>
              <td nzAlign="center">{{ data.num || '-' }}</td>
              <!-- 操作 -->
              <td nzAlign="center">
                <button nz-button nzType="link" (click)="showModal(data)"
                        *ngIf="permissionService.userPermission.has('used-store:usedLocationManage:edit')">编辑
                </button>
              </td>
            </tr>
            </tbody>
          </nz-table>

          <!-- 分页template -->
          <ng-template #totalTemplate let-total>共有 {{ tableParams.total }} 条</ng-template>
        </div>
      </div>
    </nz-card>
  </div>
</div>

<!-- 新增编辑 Modal START -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isVisible"
  nzTitle="库位信息"
  (nzOnCancel)="handleCancel()">

  <div *nzModalContent>
    <div class="custom-model-body">
      <!-- body START -->
      <form nz-form class="modal-body" [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label nzSpan="6" nzRequired>所属仓库</nz-form-label>
          <nz-form-control nzSpan="18" nzErrorTip="请选择所属仓库!">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择所属仓库" formControlName="whId">
              <nz-option
                *ngFor="let item of warehouseList"
                [nzLabel]="item.name"
                [nzValue]="item.id">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzSpan="6" nzRequired>库位编号</nz-form-label>
          <nz-form-control nzSpan="18" nzErrorTip="请输入库位编号!">
            <input formControlName="num" nz-input maxlength="10" placeholder="请输入库位编号"/>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzSpan="6" nzRequired>库位名称</nz-form-label>
          <nz-form-control nzSpan="18" nzErrorTip="请输入库位名称!">
            <input formControlName="name" nz-input maxlength="10" placeholder="请输入库位名称"/>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzSpan="6" nzRequired>库位名称</nz-form-label>
          <nz-form-control nzSpan="18" nzErrorTip="请输入库位名称!">
            <nz-radio-group formControlName="status">
              <label nz-radio nzValue="0">启用</label>
              <label nz-radio nzValue="1">禁用</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzSpan="6" nzRequired>类型</nz-form-label>
          <nz-form-control nzSpan="18" nzErrorTip="请选择类型!">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择类型" formControlName="type">
              <nz-option
                *ngFor="let item of typeOptions"
                [nzLabel]="item.name"
                [nzValue]="item.content">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzSpan="6" nzRequired>备注</nz-form-label>
          <nz-form-control nzSpan="18" nzErrorTip="请输入备注!">
            <nz-textarea-count [nzMaxCharacterCount]="100">
              <textarea rows="4" maxlength="100" formControlName="remarks" nz-input></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>
      </form>
      <!-- body END -->
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="primary" (click)="submitForm()">确定</button>
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- 新增编辑 Modal END -->
